<style scoped>
.page-nav .nav-list {
  background-color: #454545;
  position: absolute;
  top: 34px;
  left: 108px;
  color: #ffffff;
  border: 1px solid #a5a5a5;
  border-radius: 4px;
  z-index: 99;
}
.page-nav .nav-list .opt {
  padding: 4px 8px;
  text-align: right;
  background-color: #282828;
}
.page-nav .nav-list .opt a {
  color: #ffffff;
}
.page-nav .nav-list .opt a:hover {
  color: #409eff;
}
.page-nav .nav-list ul li {
  list-style-type: none;
  height: 32px;
  padding-left: 18px;
  padding-right: 12px;
  line-height: 32px;
  min-width: 140px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #282828;
}
.page-nav .nav-list ul li .cur {
  color: #409eff;
}
.page-nav .nav-list ul li .li-opt {
  font-size: 12px;
  display: inline;
  margin-left: 24px;
}
.page-nav .nav-list ul li .li-opt a {
  font-size: 12px;
  display: inline;
  padding-left: 8px;
}
.page-nav .nav-list ul li .li-opt a:hover {
  text-decoration: underline;
}
</style>
<style>
.page-nav .el-tree-node {
  min-width: 240px;
}
</style>

<!--  -->
<template>
  <div class="page-nav-list">
    <div class="nav-list">
      <div class="opt">
        <span
          ><a @click="close"><i class="el-icon-error"></i></a
        ></span>
      </div>
      <el-tree
        style="min-width: 230px; min-height: 120px"
        v-loading="pageLoading"
        :data="pageData"
        :props="defaultProps"
        :default-expand-all="false"
        :render-content="renderContent"
      >
      </el-tree>
    </div>
    <EditorPageName ref="editorPageName" />
  </div>
</template>

<script>
import EditorPageName from '@/components/header/backendHeader/backenddesignheader/nav/editor/EditorPageName.vue'
// 公共方法
import * as DesignFunctions from '@/core/DesignFunctions.js'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import { mapGetters } from 'vuex'
import PubSub from 'pubsub-js'
export default {
  created () {
    this.getData()
    PubSub.subscribe(PubsubType.PUBSUB_REFRENCE_NAVIGATION_INFO, (event, data) => {
      this.getData(data)
    })
    PubSub.subscribe(PubsubType.PUBSUB_CHOOSE_NAVIGATION_PAGE_ACTION, (event, data) => {
      this.design(data)
    })

    // 点击导航触发的页面跳转动作
    VueFunctions.method(WindowType.DESIGN_PAGE_GOTO_WITH_HREF, (href, pageid) => {
      let listNavigation = this.$store.state.design.ref.contentWindow.vueFunc.getListNavigationData()
      let item = listNavigation.find(element => {
        return element.pageId === pageid
      })
      if (!item) {
        this.$message.error('未能找到 Navigation 数据，请连续管理员！')
        return
      }
      if (item.pageType === 'external_link') {
        this.$message.error('外链接无法被编辑！')
        return
      }
      let src = DesignFunctions.getDesignPath(this.$store.state.host.id, this.$store.state.site.site.id, href)
      this.$store.dispatch('designSetIframeSrc', src)
    })
  },
  computed: {
    ...mapGetters([
      'currentIframeSrc'
    ])
  },
  props: {
    closeNavList: {
      type: Function
    },
    changeTitle: {
      type: Function
    }
  },
  data () {
    return {
      // loading
      pageLoading: true,
      // 请求获取的response数据
      data: [],
      // 转化成表格后的数据
      pageData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 当前页面的id
      currentPageId: -1,
      // 当前系统的id
      currentSystemId: -1,
      // 当前分类的id
      currentCategoryId: -1,
      // 当前详情的id
      currentItemId: -1
    }
  },
  methods: {
    close () {
      this.closeNavList()
    },
    getData (callback) {
      this.$post('/navigation/infos', {index: '2'}).then(response => {
        this.pageLoading = false
        if (response && response.length > 0) {
          this.data = response
          this.pageData = initPageData(response)
          // 找到当前的地址数据
          let uri = DesignFunctions.getUriByDesign(this.$store.state.host.id, this.$store.state.site.site.id, this.currentIframeSrc)
          if (uri.indexOf('?') !== -1) {
            let uriArray = uri.split('?')
            if (uriArray && uriArray[0]) {
              uri = uriArray[0]
            }
          }
          let page = null
          if (uri === '/index.html') {
            page = this.data[0]
          } else {
            // page = this.data.find(element => {
            //   return element.link === uri
            // })
            for (let i in this.data) {
              if (this.data[i].link === uri) {
                page = this.data[i]
              } else if (this.data[i].children && this.data[i].children.length > 0) {
                for (let j in this.data[i].children) {
                  if (this.data[i].children[j].link === uri) {
                    page = this.data[i].children[j]
                  } else if (this.data[i].children[j].children && this.data[i].children[j].children.length > 0) {
                    for (let k in this.data[i].children[j].children) {
                      if (this.data[i].children[j].children[k].pageId === uri) {
                        page = this.data[i].children[j].children[k]
                      }
                    }
                  }
                }
              }
            }
          }
          if (page) {
            this.currentPageId = page.pageId
            this.currentSystemId = page.systemId
            this.currentCategoryId = page.categoryId
            this.currentItemId = page.itemId
            this.changeTitle(page.title)
          } else {
            console.warn('通过 uri 未能找到其对应的当前页面', uri, this.data)
          }
        } else {
          this.data = []
          this.pageData = []
        }
        if (typeof callback === 'function') {
          callback()
        }
      })
    },
    design (item) {
      // 通过找到 data 中的对应的数据，构建渲染页面的url
      // let page = this.data.find(element => {
      //   return element.pageId === item.id
      // })
      let page = []
      let dataN = this.data
      for (let i in dataN) {
        if (dataN[i].pageId === item.id) {
          page.push(dataN[i])
        } else if (dataN[i].children && dataN[i].children.length > 0) {
          for (let j in dataN[i].children) {
            if (dataN[i].children[j].pageId === item.id) {
              page.push(dataN[i].children[j])
            } else if (dataN[i].children[j].children && dataN[i].children[j].children.length > 0) {
              for (let k in dataN[i].children[j].children) {
                if (dataN[i].children[j].children[k].pageId === item.id) {
                  page.push(dataN[i].children[j].children[k])
                }
              }
            }
          }
        }
      }
      if (!page) {
        return
      }
      this.changeTitle(page[0].title)
      let src = DesignFunctions.getDesignPath(this.$store.state.host.id, this.$store.state.site.site.id, page[0].link)
      this.$store.dispatch('designSetIframeSrc', src)
      this.close()
    },
    editor (data) {
      // 这里编辑只能针对名称进行编辑
      this.$refs['editorPageName'].show(data.id)
    },
    // JSX 语法
    renderContent (h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            {data.id === this.currentPageId && data.systemId === this.currentSystemId && data.categoryId === this.currentCategoryId && data.itemId === this.currentItemId ? <span class="blue" >{node.label}</span> : <span>{node.label}</span>}
          </span>
          <span style="display: inline; margin-left: 24px;">
            <span style="margin-right: 10px;font-size:8px;color:#b8b8b8;">{data.pType}</span>
            <el-button style={{ 'font-size': '12px', 'visibility': data.showDesign ? 'visible' : 'hidden' }} type="text" on-click={(e) => { e.stopPropagation(); this.design(data) }}>设计</el-button>
            <el-button style={{ 'font-size': '12px', 'visibility': data.showEditor ? 'visible' : 'hidden' }} type="text" on-click={(e) => { e.stopPropagation(); this.editor(data) }}>编辑</el-button>
          </span>
        </span>
      )
    }
  },
  components: {
    EditorPageName
  }
}

/**
 * 构建初始化tree的数据
 */
function initPageData (response) {
  if (!response || response.length < 1) {
    return []
  }
  let result = []
  for (let i in response) {
    let item = response[i]
    let showDesign = true
    let showEditor = true
    let pType = '未定义'
    if (item.pageType === 'custom') {
      pType = '普通'
    } else if (item.pageType === 'external_link') {
      pType = '外链'
      showDesign = false
    } else if (item.pageType === 'inside_link') {
      pType = '内链'
      showDesign = false
    } else if (item.pageType === 'list') {
      pType = '系统'
      if (item.categoryId > 0) {
        showDesign = false
        showEditor = false
        pType = '分类'
      }
    }
    let element = {
      id: item.pageId,
      systemId: item.systemId,
      categoryId: item.categoryId,
      itemId: item.itemId,
      pType: pType,
      showDesign: showDesign,
      showEditor: showEditor,
      label: item.text,
      children: initPageData(item.children)
    }
    result.push(element)
  }
  return result
}
</script>
